<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2023-09-26 17:07:53
 * @LastEditTime: 2025-06-19 21:31:23
 * @LastEditors: sueRimn
-->


<template>
  <view class="header d-flex align-items-center">
    <view class="weizhi d-flex align-items-center">
      <view class="base-icons weizhi-icon" />
      <view class="text">{{ geoLocation.city }}</view>
    </view>
    <view class="search d-flex flex-fill align-items-center" @click="handleSearch">
      <view class="base-icons sousuo-icon" />
      <view class="text">搜索您想估价的机型</view>
    </view>
    <view class="kefu d-flex justify-content-end">

      <!-- #ifdef MP-WEIXIN -->
      <button class="base-icons kefu-icon" style="background-color: none;" open-type='contact'></button>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view class="base-icons kefu-icon" @click="goService"/>
      <!-- #endif -->
      <!-- #ifdef MP-ALIPAY -->
      <view class="kefu-icon"><ContactButton tntInstId="GOQ_zY53" scene="SCE01269870"/></view>
      <!-- #endif -->
    </view>
  </view>
</template>


<script>
export default {
  props: {
    geoLocation: { type: Object, default: {} }
  },
  methods: {
    handleSearch() {
      uni.navigateTo({ url: '/pages/search/index' })
    },
    goService() {
	    uni.navigateTo({
        url: "/pages/service/index"
      })
	  }
  }
}
</script>

<style lang="scss" scoped>
.header {
  padding: 0rpx 32rpx 0rpx 32rpx;
  position: relative;
  z-index: 1;
  // #ifndef H5
  margin: 0rpx auto 0;
  // #endif
  // #ifdef H5
  margin: 30rpx auto 0;
  // #endif


  .weizhi {
    width: 168rpx;

    .text {
      font-size: 30rpx;
      color: #fff;
      margin: 0 0 0 5rpx;
    }
  }

  .search {
    height: 80rpx;
    // background: #64bebd;
    border-radius: 40rpx;
    border: 2px solid #eee;
    padding: 0 24rpx;

    .text {
      font-size: var(--hui-font-size-26);
      margin: 0 0 0 10rpx;
      color: var(--hui-color-white);
    }
  }

  .kefu {
    width: 64rpx;

    .kefu-icon {
      width: 45rpx;
      height: 40rpx;
      background-image: url("https://image.chushouya.com/uploads/file/20250619/20250619194631_983.png");
      background-repeat: no-repeat;
      background-size: 1000rpx;
      background-position: -58rpx -70rpx;
      border: none;
      outline: none;
      cursor: pointer;
      background-color: transparent;
      position: relative;

      &::after {
        display: none;
      }
    }
  }
}
::v-deep {
  .kefu .kefu-icon contact-button{
    width: 100%;
    height: 100%;
    position: absolute;
    left:0;
    top:0;
    opacity:0;
    z-index:88;
  }
}
</style>